<template>
  <div class="wrapper-add-edit">
    <div class="wrapper-example">
      <p>
        只要填写权限的中英文关键字词，自动生成相应的操作权限。注意：批量添加的权限需要手动绑定前端路由。
        <br />
        例如填写中英文关键字词为“管理员”、“admin”，则自动生成下列数据：
      </p>
      <table width="50%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <th width="30%">权限名称</th>
          <th width="25%">权限标识</th>
          <th width="25%">服务器端url</th>
          <th width="20%">httpMethod</th>
        </tr>
        <tr>
          <td>管理员添加</td>
          <td>admin_add</td>
          <td>/admin</td>
          <td>POST</td>
        </tr>
        <tr>
          <td>管理员删除</td>
          <td>admin_delete</td>
          <td>/admin/**</td>
          <td>DELETE</td>
        </tr>
        <tr>
          <td>管理员修改所有资料</td>
          <td>admin_update</td>
          <td>/admin/**</td>
          <td>PUT</td>
        </tr>
        <tr>
          <td>管理员修改部分资料</td>
          <td>admin_patch</td>
          <td>/admin/**</td>
          <td>PATCH</td>
        </tr>
        <tr>
          <td>管理员查看详情</td>
          <td>admin_show</td>
          <td>/admin/**</td>
          <td>GET</td>
        </tr>
        <tr>
          <td>管理员查看所有列表</td>
          <td>admin_list_all</td>
          <td>/admin/list-all</td>
          <td>GET</td>
        </tr>
        <tr>
          <td>管理员查看分页列表</td>
          <td>admin_list_page</td>
          <td>/admin/list-page</td>
          <td>GET</td>
        </tr>
        <tr>
          <td>管理员根据条件查询</td>
          <td>admin_query</td>
          <td>/admin</td>
          <td>GET</td>
        </tr>
      </table>
    </div>

    <el-form ref="refForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="中文关键字词" prop="keywordCN">
        <el-col :span="5">
          <el-input ref="refKeywordCN" v-model="formData.keywordCN" placeholder="权限中文名称关键字词" />
        </el-col>
      </el-form-item>

      <el-form-item label="英文关键字词" prop="keywordEN">
        <el-col :span="5">
          <el-input ref="refKeywordEN" v-model="formData.keywordEN" placeholder="权限英文代码关键字词" />
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onAddBatch">确定添加</el-button>
        <el-button type="info" @click="onBack2List">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { toastSuccess, toastError } from '@/utils/toast'

import router from '@/router'
import store from '@/store'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'PurviewAddBatchView',
  setup() {
    const formData = ref({
      keywordCN: '',
      keywordEN: '',
    })
    const rules = ref({
      keywordCN: [{ required: true, message: '请输入关键字词', trigger: 'blur' }],
      keywordEN: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
    })
    const refForm = ref(null)
    const refKeywordCN = ref(null)
    const refKeywordEN = ref(null)

    // 返回列表页
    const onBack2List = () => {
      router.push({ path: 'list-all' })
    }
    // 提交表单
    const onAddBatch = () => {
      refForm.value.validate((valid) => {
        if (!valid) {
          toastError('表单验证失败！请检查您的输入！')
          return
        }
        const purviewList = buildPurviewList()
        store
          .dispatch('sys_purview/addBatch', purviewList)
          .then(() => {
            toastSuccess('添加成功！')
            router.push({ path: 'list-all' })
          })
          .catch((error) => {
            toastError('添加权限出现错误！')
            console.log(error)
          })
      })
    }

    const buildPurviewList = () => {
      const list = []
      const keywordCN = formData.value.keywordCN
      const keywordEN = formData.value.keywordEN

      function Purview(id, label, code, serverUrl, httpMethod, bodyParams, tag) {
        this.id = id
        this.label = label
        this.code = code
        this.serverUrl = serverUrl
        this.httpMethod = httpMethod
        this.bodyParams = bodyParams
        this.tag = tag
      }

      let p = new Purview()
      p.label = keywordCN + '添加'
      p.code = keywordEN + '_add'
      p.serverUrl = '/' + keywordEN
      p.httpMethod = 'POST'
      p.tag = keywordCN
      list.push(p)
      p = new Purview()
      p.label = keywordCN + '删除'
      p.code = keywordEN + '_delete'
      p.serverUrl = '/' + keywordEN + '/**'
      p.httpMethod = 'DELETE'
      p.tag = keywordCN
      list.push(p)
      p = new Purview()
      p.label = keywordCN + '修改所有资料'
      p.code = keywordEN + '_update'
      p.serverUrl = '/' + keywordEN + '/**'
      p.httpMethod = 'PUT'
      p.tag = keywordCN
      list.push(p)
      p = new Purview()
      p.label = keywordCN + '修改部分资料'
      p.code = keywordEN + '_patch'
      p.serverUrl = '/' + keywordEN + '/**'
      p.httpMethod = 'PATCH'
      p.tag = keywordCN
      list.push(p)
      p = new Purview()
      p.label = keywordCN + '查看详情'
      p.code = keywordEN + '_show'
      p.serverUrl = '/' + keywordEN + '/**'
      p.httpMethod = 'GET'
      p.tag = keywordCN
      list.push(p)
      p = new Purview()
      p.label = keywordCN + '查看所有列表'
      p.code = keywordEN + '_list_all'
      p.serverUrl = '/' + keywordEN + '/list-all'
      p.httpMethod = 'GET'
      p.tag = keywordCN
      list.push(p)
      p = new Purview()
      p.label = keywordCN + '查看分页列表'
      p.code = keywordEN + '_list_page'
      p.serverUrl = '/' + keywordEN + '/list-page'
      p.httpMethod = 'GET'
      p.tag = keywordCN
      list.push(p)
      p = new Purview()
      p.label = keywordCN + '查询'
      p.code = keywordEN + '_query'
      p.serverUrl = '/' + keywordEN
      p.httpMethod = 'GET'
      p.tag = keywordCN
      list.push(p)
      return list
    }

    return {
      formData,
      rules,
      refForm,
      refKeywordCN,
      refKeywordEN,
      onBack2List,
      onAddBatch,
      buildPurviewList,
    }
  },
})
</script>

<style lang="scss" scoped>
.wrapper-example {
  margin-bottom: 24px;
  p {
    line-height: 32px;
    margin-bottom: 24px;
  }
  table {
    border-left: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    tr {
      th {
        background: #e9e9e9;
        border-right: 1px solid #d4d4d4;
        border-top: 1px solid #d4d4d4;
        padding: 6px;
        font-size: 14px;
        font-weight: bold;
      }
      td {
        border-right: 1px solid #d4d4d4;
        border-top: 1px solid #d4d4d4;
        padding: 5px;
        font-size: 12px;
      }
    }
  }
}
</style>
